<!DOCTYPE html>
<html lang="en">
<title>企业储值卡管理-充值</title>
<#import "/layout/layout.html" as body/>

<@body.page>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>企业储值卡管理</h2>
        <ol class="breadcrumb">
            <li><a href="#">企业储值账户列表</a></li>
            <li class="active"><strong>充值</strong></li>
        </ol>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeIn">
    <div class="tabs-container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">充值</a></li>
            <li class=""><a data-toggle="tab" href="#tab-2" onclick="companyRechargePage(1)" aria-expanded="false">充值流水</a></li>
            <li class=""><a data-toggle="tab" href="#tab-3" onclick="companyOrderPage(1)" aria-expanded="false">消费流水</a></li>
        </ul>
        <div class="tab-content">
            <!-- 充值 -->
            <div id="tab-1" class="tab-pane active">
                <div class="panel-body">
                    <div class="wrapper wrapper-content animated fadeInRight">
                        <div class="ibox-content">
                            <form class="form-horizontal" name="addForm" id="addForm">
                                <input type="hidden" id="companyId" name="companyId" value="${company.id}">
                                <input type="hidden" id="companyName" name="companyName" value="${company.name!}">
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">企业名称</label>
                                    <div class="col-sm-10">
                                        <div style="margin-top: 8px">${company.name!}</div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">充值金额</label>
                                    <div class="col-sm-10">
                                        <input type="number" min="0" id="amount" name="amount" class="form-control" placeholder="请输入本次充值金额">
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">转款金额</label>
                                    <div class="col-sm-10">
                                        <input type="number" min="0" id="transferAmount" name="transferAmount" class="form-control" placeholder="请记录合作公司的转款金额">
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">备注</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="remark" name="remark" class="form-control" placeholder="非必填">
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">转款凭证</label>
                                    <div class="col-sm-10">
                                        <div id="transferVoucher" style="min-height: 150px;" class="dropzone">
                                            <input type="hidden" id="transferDocEvidence" name="transferDocEvidence">
                                            <div class="dropzone-previews"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">选择验证人</label>
                                    <div class="col-sm-10" id="users">
                                        <!--<div class="checkbox-inline i-checks"><label for="is_user1"> <input type="radio" id="is_user1" value="188 8888 0000" name="checkBy"> <i></i> 波波 </label></div>-->
                                        <#if checkList??>
                                            <#list checkList as list>
                                                <div class="checkbox-inline i-checks"><label for="${list.id!}"> <input type="radio" id="${list.id!}" value="${list.phone!}" name="a" data-name="${list.name!}"> <i></i> ${list.name!} </label></div>
                                            </#list>
                                        </#if>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">发送验证码</label>
                                    <div class="col-sm-10">
                                        <input type="hidden" id="checkBy" name="checkBy">
                                        <input type="text" class="form-control" id="mobile" style="width: 130px;float: left; border: 0" readonly>
                                        <input id="sendCheckCode" type="button" class="btn btn-sm btn-primary btn-rounded" value="发送验证码">
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group"><label class="col-sm-2 control-label">输入验证码</label>
                                    <div class="col-sm-10"><input id="checkCode" class="form-control" placeholder="联系验证人得到验证码"></div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </form>
                        </div>
                    </div>
                    <div class="ibox-content overflow">
                        <div class="col-sm-12">
                            <a id="back" href="${baseUrl}system/company/list"  class="btn btn-default pull-left">返回列表</a>

                            <button id="submit" type="button" class="btn btn-primary pull-right">确认充值</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 充值流水 -->
            <div id="tab-2" class="tab-pane">
                <div class="panel-body">
                    <div class="wrapper wrapper-content animated fadeInRight">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-content">
                                        <div class="table-responsive">
                                            <form  class="form-inline" id="form2">
                                                <div class="form-group">
                                                    <label for="year">年份:</label>
                                                    <select class="form-control" id="year" name="year">
                                                        <option value="">全部</option>
                                                        <option value="2017">2017</option>
                                                        <option value="2018">2018</option>
                                                        <option value="2019">2019</option>
                                                        <option value="2020">2020</option>
                                                        <option value="2021">2021</option>
                                                        <option value="2022">2022</option>
                                                        <option value="2023">2023</option>
                                                        <option value="2024">2024</option>
                                                        <option value="2025">2025</option>
                                                        <option value="2026">2026</option>
                                                    </select>

                                                    <label for="month">月份：</label>
                                                    <select class="form-control" id="month" name="month">
                                                        <option value="">全部</option>
                                                        <option value="1">1月</option>
                                                        <option value="2">2月</option>
                                                        <option value="3">3月</option>
                                                        <option value="4">4月</option>
                                                        <option value="5">5月</option>
                                                        <option value="6">6月</option>
                                                        <option value="7">7月</option>
                                                        <option value="8">8月</option>
                                                        <option value="9">9月</option>
                                                        <option value="10">10月</option>
                                                        <option value="11">11月</option>
                                                        <option value="12">12月</option>
                                                    </select>
                                                </div>
                                                <button type="button" onclick="companyRechargePage(1);" class="btn btn-outline btn-primary" style="margin-top: 5px">确认</button>
                                            </form>
                                            <hr style="width: 100%">
                                            <table class="table table-hover table-center dataTables-example">
                                                <thead>
                                                <tr>
                                                    <th>充值人</th>
                                                    <th>验证人</th>
                                                    <th>充值时间</th>
                                                    <th>充值前金额</th>
                                                    <th>充值金额</th>
                                                    <!--<th>实际转款金额</th>-->
                                                    <th>充值后金额</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody id="historyList">
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="ibox-footer overflow">
                                        <h4 class="pull-left">合计：<span id="historyCount">0</span>条记录</h4>
                                        <div id="history-page" class="pull-right copot-page"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 消费流水 -->
            <div id="tab-3" class="tab-pane">
                <div class="panel-body">
                    <div class="wrapper wrapper-content animated fadeInRight">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-content">
                                        <div class="table-responsive">
                                            <form  class="form-inline" id="form3">
                                                <div class="form-group">
                                                    <label for="year2">年份:</label>
                                                    <select class="form-control" id="year2" name="year">
                                                        <option value="">全部</option>
                                                        <option value="2017">2017</option>
                                                        <option value="2018">2018</option>
                                                        <option value="2019">2019</option>
                                                        <option value="2020">2020</option>
                                                        <option value="2021">2021</option>
                                                        <option value="2022">2022</option>
                                                        <option value="2023">2023</option>
                                                        <option value="2024">2024</option>
                                                        <option value="2025">2025</option>
                                                        <option value="2026">2026</option>
                                                    </select>

                                                    <label for="month2">月份：</label>
                                                    <select class="form-control" id="month2" name="month">
                                                        <option value="">全部</option>
                                                        <option value="1">1月</option>
                                                        <option value="2">2月</option>
                                                        <option value="3">3月</option>
                                                        <option value="4">4月</option>
                                                        <option value="5">5月</option>
                                                        <option value="6">6月</option>
                                                        <option value="7">7月</option>
                                                        <option value="8">8月</option>
                                                        <option value="9">9月</option>
                                                        <option value="10">10月</option>
                                                        <option value="11">11月</option>
                                                        <option value="12">12月</option>
                                                    </select>
                                                </div>

                                                <button type="button" onclick="companyOrderPage(1)" class="btn btn-outline btn-primary" style="margin-top: 5px">确认</button>
                                            </form>
                                            <hr style="width: 100%">
                                            <table class="table table-hover table-center dataTables-example">
                                                <thead>
                                                <tr>
                                                    <th>月份</th>
                                                    <th>消费总额</th>
                                                    <th>退款总额</th>
                                                    <th>订单总额</th>
                                                    <th>操作</th>
                                                </tr>
                                                </thead>
                                                <tbody id="orderList">
                                                <tr>
                                                    <td>2016-12</td>
                                                    <td>¥100000.00</td>
                                                    <td>¥100000.00</td>
                                                    <td>¥100000.00</td>
                                                    <td>
                                                        <a href="#" class="btn btn-default"><i class="fa fa-download"></i> 下载明细</a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="ibox-footer overflow">
                                        <h4 class="pull-left">合计：<span id="orderCount">0</span>条记录</h4>
                                        <div id="order-page" class="pull-right copot-page"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${baseUrl}js/main.js"></script>
<script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
<script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>
<script type="text/javascript" src="${baseUrl}js/upload/webToOss.js"></script>
<script src="${baseUrl}js/plugins/dropzone/dropzone.js"></script>
<script>
    var categoryPicList = new Array();//类别硬照
    $(document).ready(function () {
        //页面自动切换Tab
//        debugger
        function getarg(url) {
            var arg = url.split("#");
            return arg[1];
        }
        var _url = getarg(window.location.href);
        $('.nav-tabs a[href="#' + _url + '"]').tab('show');
        if(_url && _url.length>0 && _url == "tab-2"){
            companyRechargePage(1);
        }


        new Page({
            parent: $("#copot-page"),
            nowPage: 1,
            pageSize: 10,
            totalCount: 25,
            setting: {
                defaultPage: 7,//默认显示可点击分页的个数
                firstPageText: "首页",
                prevPageText: "上一页",
                nextPageText: "下一页",
                lastPageText: "尾页"
            },
            callback: function (nowPage, totalPage) {
                $("#pageNo").val(nowPage);
                $("#form").submit();
            }
        });
        new Page({
            parent: $("#copot-page2"),
            nowPage: 1,
            pageSize: 5,
            totalCount: 25,
            setting: {
                defaultPage: 7,//默认显示可点击分页的个数
                firstPageText: "首页",
                prevPageText: "上一页",
                nextPageText: "下一页",
                lastPageText: "尾页"
            },
            callback: function (nowPage, totalPage) {
                $("#pageNo2").val(nowPage);
                $("#form2").submit();
            }
        });

        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });

        $('#users input').on('ifChecked', function () {
            $('#mobile').val($(this).val());
            $("#checkBy").val($(this).data('name'));
        });

        //发送验证码
        $("#sendCheckCode").click(function () {
            var mobile = $("#mobile").val();
            if (mobile.trim().length<=0){
                console.log("手机号码为空!");
                swal("手机号码不能为空!","", "error");
                return false;
            }
            var This = this;
            $.post("${baseUrl}system/company/send",{mobile:$("#mobile").val()},function (result) {
                if(result =="success"){
                    //验证码发送成功...
                    time(This);
                }
                swal({
                    title:"验证码发送成功!",
                    timer:1000
                }).then(
                    function () {},
                    // handling the promise rejection
                    function (dismiss) {
                        if (dismiss === 'timer') {
                            console.log('I was closed by the timer')
                        }
                    }
                )
            });

        });

        //回车绑定
        $(".submit").keydown(function(event){
            if(event.which == "13")
                submit();
        });

        //提交
        $("#submit").click(function (){
            submit();
        });

        //保存提交
        function submit() {
            var btn = $("#submit");
            if(btn.attr("disabled")!='disabled') {
                btn.attr("disabled","disabled");
            }
            //校验图片是否上传
            if(categoryPicList == null || categoryPicList.length == 0){
                swal("错误!", "请先上传转款凭证!", "error");
                btn.attr("disabled","false");
                return false;
            }
            $("#transferDocEvidence").val(categoryPicList.join("#"));

            $.post("${baseUrl}system/company/check_code",
                {
                    checkCode: $("#checkCode").val()
                },
                function (result) {
//                    debugger
                    if (result == "success") {
//                        debugger
                        var param = $("#addForm").serialize();
                        $.post("${baseUrl}system/company/save_company_recharge", param,
                            function (result) {
                                debugger
                                if (result == "success") {
                                    swal("保存成功!",  "页面即将重新加载,请稍后...", "success");
                                    window.setTimeout(function () {
                                        window.location = '${baseUrl}system/company/list'
                                    }, 1000);
                                } else {
                                    swal({title: result});
                                    btn.removeAttr("disabled");
                                }
                            }
                        );
                    } else {
                        swal({title: result});
                        btn.removeAttr("disabled");
                    }
                }
            );
        }

        var wait = 60;
        function time(o) {
            if (wait == 0) {
                o.removeAttribute("disabled");
                o.value = "发送验证码";
                wait = 60;
            } else {
                o.setAttribute("disabled", true);
                o.value = "重新发送(" + wait + ")";
                wait--;
                setTimeout(function () {
                    time(o)
                }, 1000)
            }
        }

        Dropzone.autoDiscover = false;
        myDropzone = new Dropzone("#transferVoucher", {
            url: "upload_pic",
            uploadMultiple: false,
            addRemoveLinks: true,
            dictDefaultMessage: "请上传本次充值金额的对应转款凭证",
            dictFileTooBig: "文件过大",
            dictCancelUpload: "取消上传",
            dictRemoveFile: "移除文件",
            maxFilesize: 10.5,
            acceptedFiles: ".jpg,.jpeg,.png",
            method: 'post',
            filesizeBase: 1024,

            init: function () {
                this.on("error", function (file, response, XMLHttpRequest) {
                    swal("图片上传异常!", "图片服务器出错,即将清除无效图片,请稍后重新上传...", "error");
                    window.setTimeout(function () {
                        $('#category_pic .dz-image-preview.dz-error').remove()
                    }, 1000);
                });
                this.on("success", function (file, response, e) {
                    if (response.error) {
                        $(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
                    } else {
                        console.log("url ---> " + response.url);
                        categoryPicList.push(response.url);
                    }
                });
                this.on("sending", function (file, xhr, formData) {
                    formData.append("filesize", file.size);
                });
                this.on("removedfile", function (file) {
                    var responseJson = null;
                    if (file && file.xhr && file.xhr.responseText) {
                        responseJson = $.parseJSON(file.xhr.responseText);
                    }
                    if (responseJson) {
                        console.log(responseJson)
                        $.each(categoryPicList, function (i, data) {
                            if (categoryPicList[i].indexOf(responseJson.url) > -1) {
                                categoryPicList.splice(i, 1);
                            }
                        });
                    }
                    if (file.name.length > 0) {
                        for (var i = 0; i < categoryPicList.length; i++) {
                            if (categoryPicList[i].indexOf(file.name) > -1) {
                                categoryPicList.splice(i, 1);
                            }
                            console.log("文件 " + file.name + " 被移除");
                        }
                    }
                });
            }
        });
    });

    /**
     * 充值流水
     *
     */
    function companyRechargePage(currentIndex){
        var param = {
            "pageIndex": currentIndex,
            "pageSize": 10,
            "year": $("#year").val(),
            "month": $("#month").val()
        };
        $.post("${baseUrl}system/company/companyRecharge?companyId=${company.id}", param, function (result) {
            result = JSON.parse(result);
            new Page({
                parent: $("#history-page"),
                nowPage: currentIndex,
                pageSize: 10,
                totalCount: result.count,
                setting: {
                    defaultPage: 5,//默认显示可点击分页的个数
                    firstPageText: "首页",
                    prevPageText: "上一页",
                    nextPageText: "下一页",
                    lastPageText: "尾页"
                },
                callback: function (nowPage, totalPage) {
                    companyRechargePage(nowPage);
                }
            });

            $("#historyCount").text(result.count);

            var html = "";

            $.each(result.list, function (i, data) {

                html += "<tr><td>" + data.clientManager + "</td>";
                html += "<td>" + data.checkBy + "</td>";
                html += "<td>" + data.createdTime + "</td>";
                html += "<td>¥" + data.beforeTransferAmount + "</td>";
                html += "<td>¥" + data.amount +"(实际转款¥"+data.transferAmount+")</td>";
//                html += "<td>¥" + data.transferAmount + "</td>";
                html += "<td>¥" + data.afterTransferAmount + "</td>";
                html += "<td>";
                html += "<a target='_self' href='${baseUrl}system/company/companyRechargeDetail?id=" + data.id + "' class='btn btn-default'>转款凭证</a>";
                html += "</td>";
                html += "</tr>";
            });
            $("#historyList").html(html);

        });
    }

    /**
     * 订单流水
     *
     */
    function companyOrderPage(currentIndex){
        var param = {
            "pageIndex": currentIndex,
            "pageSize": 10,
            "year": $("#year2").val(),
            "month": $("#month2").val()
        };
        $.post("${baseUrl}system/company/companyOrderHistory?companyId=${company.id}", param, function (result) {
            result = JSON.parse(result);
            new Page({
                parent: $("#order-page"),
                nowPage: currentIndex,
                pageSize: 10,
                totalCount: result.count,
                setting: {
                    defaultPage: 5,//默认显示可点击分页的个数
                    firstPageText: "首页",
                    prevPageText: "上一页",
                    nextPageText: "下一页",
                    lastPageText: "尾页"
                },
                callback: function (nowPage, totalPage) {
                    companyOrderPage(nowPage);
                }
            });

            $("#orderCount").text(result.count);

            var html = "";

            $.each(result.list, function (i, data) {

                html += "<tr><td>" + data.yearMonth + "</td>";
                html += "<td>¥" + data.doneAmount + "</td>";
                html += "<td>¥" + data.cancelAmount + "</td>";
                html += "<td>¥" + data.totalAmount + "</td>";
                html += "<td>";
                html += "<a target='_self' href='${baseUrl}system/company/downloadOrderDetail?companyId=${company.id}&year=" + data.yearMonth.substring(0, 4) + "&month=" + data.yearMonth.substring(5) + " ' class='btn btn-default'><i class='fa fa-download'></i> 下载明细</a>";
                html += "</td>";
                html += "</tr>";
            });
            $("#orderList").html(html);

        });
    }
</script>
</@body.page>
</html>